.top<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="tbl">
		<thead></thead>
		<tbody>
			<tr>
				<td>iphone6</td>
				<td>4488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>4488</td>
			</tr>
			<tr>
				<td>iphone7</td>
				<td>5488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>5488</td>
			</tr>
			<tr>
				<td>iphone8</td>
				<td>6488</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>6488</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">总计:</td>
				<td id="total">0</td>
			</tr>
		</tfoot>
	</table>
	
	<script type="text/javascript">		
		var tbody=document.getElementsByTagName("tbody")[0];
		allprice();
		tbl.onclick=()=>{
		var target=event.target;			
			if(target.innerText=="+"){
				target.previousElementSibling.innerHTML=parseInt(target.previousElementSibling.innerHTML)+1;
				var price=parseInt(target.parentNode.previousElementSibling.innerHTML);
				target.parentNode.nextElementSibling.innerHTML=price*parseInt(target.previousElementSibling.innerHTML);				
				allprice();
			}else if(target.innerText=="-"){				
				if(parseInt(target.nextElementSibling.innerHTML)>1){
					target.nextElementSibling.innerHTML=parseInt(target.nextElementSibling.innerHTML)-1;										
				}
				var price=parseInt(target.parentNode.previousElementSibling.innerHTML);
				target.parentNode.nextElementSibling.innerHTML=price*parseInt(target.nextElementSibling.innerHTML);
				allprice();				
			}
		}
		
		function allprice(){
			for(var k=0,sum=0;k<tbody.children.length;k++){
					sum+=parseInt(tbody.children[k].lastElementChild.innerHTML);
					console.log(sum);
					total.innerHTML=sum;
				}
		}
	</script>
	</body>
</html>
